<template>
    <div>
        <iframe ref="iframChart" class="normale-iframe"></iframe>
        <div ref="lineChart" style="height: 400px;"></div>
    </div>
</template>
<script>
import echarts from 'echarts'
var myChart
var xData = ['芝罘区', '福山区', '莱山区', '牟平区', '海阳市', '莱阳市', '蓬莱市', '栖霞市', '龙口市', '长岛县', '招远市', '莱州市', '开发区', '高新区', '昆嵛山', '龙海', '机场', '核电']
var y1Data = [10758, 8975, 2980, 1831, 2122, 3018, 3525, 1729, 2764, 380, 3988, 2333, 3596, 453, 365, 9, 67, 3008]
var y2Data = [25, 20, 5.9, 0.9, 0.7, 1.1, 2.1, 0.4, 1.9, 3.8, 1.6, 0.7, 5.7, 6.1, 2.1, 0.4, 1.9, 4.4]
export default {
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        data () {
            this.setEchartOption()
        }
    },
    mounted () {
        myChart = echarts.init(this.$refs.lineChart)
        this.setEchartOption()
        this.$refs.iframChart.contentWindow.onresize = () => {
            myChart.resize()
        }
    },
    methods: {
        showMsg () {
            alert('aaaaa')
        },
        setEchartOption () {
            var option = {
                grid: {
                    left: '10',
                    right: '10',
                    top: '10',
                    bottom: '90'
                },
                title: {
                    show: false
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['监控数量', '监控密度'],
                    right: 'center',
                    bottom: 0,
                    itemWidth: 11,
                    itemHeight: 11
                },
                toolbox: {
                    show: false
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        show: true,
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            margin: 8,
                            interval: 0,
                            formatter (val) {
                                return val.split('').join('\n')
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                type: 'solid',
                                color: '#666',
                                width: '1'
                            }
                        },
                        data: xData
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        scale: true,
                        name: '',
                        axisLine: {
                            show: false
                        },
                        splitNumber: 4,
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        boundaryGap: [0.2, 0.2]
                    },
                    {
                        type: 'value',
                        scale: true,
                        axisLine: {
                            show: false
                        },
                        splitNumber: 3,
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        name: '',
                        boundaryGap: [0.2, 0.2]
                    }
                ],
                series: [
                    {
                        name: '监控数量',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#1dacfe'
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#4889fb'
                            }
                        },
                        barWidth: '40%',
                        yAxisIndex: 0,
                        data: y1Data
                    },
                    {
                        name: '监控密度',
                        yAxisIndex: 1,
                        color: '#ffd300',
                        smooth: true,
                        lineStyle: {
                            color: '#ffd300'
                        },
                        type: 'line',
                        data: y2Data
                    }
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>
<style lang="less">
.normale-iframe {
    width: 100%;
    height: 0;
    background: #f00;
    border: none;
    display: block;
}
</style>
